<template>
  <div class="archive">
    <div class="conception-speak">
      <div class="speak">
        <div class="white--text conception">初心不改，意往无前</div>
      </div>
      <div class="down">
        <v-icon large>mdi-arrow-down</v-icon>
      </div>
    </div>
    <div ref="articleList">
      <v-container>
        <v-row justify="center">
          <v-col cols="12" md="9" xl="8" lg="10">
            <v-sheet
              elevation="10"
              rounded="lg"
              class="pa-1"
              color="transparent"
            >
              <v-container>
                <v-chip-group column v-model="selectTags" multiple>
                  <v-chip
                    v-for="tag in tags"
                    :key="tag.id"
                    :value="tag.id"
                    outlined
                    filter
                    @input="selectTag"
                    >{{ tag.name }}</v-chip
                  >
                </v-chip-group>
              </v-container>
            </v-sheet>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="12" md="9" xl="8" lg="10">
            <v-sheet
              elevation="10"
              rounded="lg"
              class="pa-1"
              color="transparent"
            >
              <v-container>
                <v-list
                  v-intersect="{
                    handler: onIntersect,
                    options: {
                      threshold: 0.8
                    }
                  }"
                  color="transparent"
                >
                  <v-list-item
                    v-for="article in articles"
                    :key="article.id"
                    :to="'/article/' + article.id"
                    class="grey lighten-4 rounded mt-2 mb-2"
                  >
                    <v-list-item-avatar rounded size="100">
                      <v-img :src="article.imageLink | imgSizeFilter"></v-img>
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title>{{ article.title }}</v-list-item-title>
                      <v-list-item-subtitle class="mt-1">
                        <span
                          class="pink lighten-3 white--text font-weight-bold rounded-xl pa-1"
                          style="font-size: .6em;"
                          >{{ article.createTime }}</span
                        >
                      </v-list-item-subtitle>
                      <v-list-item-subtitle class="mt-1">
                        <div>
                          <v-icon class="mr-1" small>
                            mdi-eye
                          </v-icon>
                          <span class="subheading mr-2">{{
                            article.views
                          }}</span>
                          <v-icon class="mr-1 ml-1" small>
                            mdi-tag
                          </v-icon>
                          <span class="subheading">{{ article.tagText }}</span>
                        </div>
                      </v-list-item-subtitle>
                      <v-list-item-subtitle class="mt-1">{{
                        article.articleDesc
                      }}</v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </v-list>
              </v-container>
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </div>
    <Footer />
  </div>
</template>

<script>
import { vantaBgInit, updateBg } from "@/util/vantaBgInit";
import Footer from "@/components/Footer";
import { allTag } from "@/api/tag";
import { articleList } from "@/api/article";
export default {
  name: "Archive",
  components: { Footer },
  mounted() {
    allTag().then(res => {
      this.tags = res.data.tags;
    });
    this.getData();
    window.addEventListener("scroll", this.scroll);
  },
  data() {
    return {
      tags: [],
      selectTags: [],
      pageNo: 1,
      articles: [],
      vantaBg: null
    };
  },
  methods: {
    getData() {
      articleList(this.pageNo, 10, { tags: this.selectTags }).then(res => {
        this.pageNo = res.data.page.current;
        this.pageCount = res.data.page.pages;
        res.data.page.records.forEach(v => this.articles.push(v));
        if (this.vantaBg) updateBg(this);
        else this.vantaBg = vantaBgInit(this.$refs.articleList);
      });
    },
    selectTag() {
      this.pageNo = 1;
      this.articles = [];
      this.getData();
    },
    onIntersect(entries) {
      if (entries[0].intersectionRatio >= 0.8 && this.pageNo < this.pageCount) {
        ++this.pageNo;
        this.getData();
      }
    },
    scroll() {
      const clientHeight = document.body.clientHeight;
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.body.scrollHeight;
      if (
        clientHeight + scrollTop >= scrollHeight - 80 &&
        this.pageNo < this.pageCount
      ) {
        ++this.pageNo;
        this.getData();
      }
    }
  },
  filters: {
    imgSizeFilter(val) {
      return (
        val.substr(0, val.lastIndexOf(".")) +
        "_100x100_95_c" +
        val.substr(val.lastIndexOf("."))
      );
    }
  },
  beforeDestroy() {
    if (this.vantaBg) this.vantaBg.destroy();
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>

<style scoped>
.archive {
  width: 100%;
  height: 93vh;
}
</style>
